<template>

  <div class="main">
    <a-space direction="vertical" :size="16" class="grid">

      <a-row justify="start">
        <a-col :span="2" ><a-input v-model="packageTypeQuery.id " placeholder="套餐类型编号" /></a-col>
        <a-col :span="2" ><a-input v-model="packageTypeQuery.packageTypeName" placeholder="套餐类型名称" /></a-col>
        <a-col :span="2" class="row">
          <a-select v-model="packageTypeQuery.status" placeholder="请选择状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>

      <a-row justify="start">
        <a-space size="small">
          <a-col :span="1"><a-button type="primary" @click="handleClick" >新增</a-button></a-col>
          <a-col :span="1"><a-button type="outline" status="danger" :disabled="selectList.length == 0" @click="delData">删除</a-button></a-col>
        </a-space>
      </a-row>

      <a-table :data="data" row-key="id" :row-selection="selectList"
               :scroll="scroll" :scrollbar="scrollbar"
               v-model:selectedKeys="selectList" :pagination="false"
               style="background-color: white;">
        <template #columns>
          <a-table-column title="编号" data-index="id"></a-table-column>
          <a-table-column ellipsis="true" title="名称" data-index="packageTypeName"></a-table-column>
          <a-table-column title="状态" data-index="status">
            <template #cell="{record}">
              <a-tag v-if="record.status == 1" color="green">上架</a-tag>
              <a-tag v-if="record.status == 0" color="red">下架</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="上传者" data-index="updateBy"></a-table-column>
          <a-table-column title="上传时间" data-index="updateTime"></a-table-column>
          <a-table-column title="操作">
            <template #cell="{record}">
              <a-button type="text" @click="updataClick(record)">修改</a-button>
              <a-button type="text" @click="delData(record)" status="danger">删除</a-button>
            </template>
          </a-table-column>
        </template>

        <template #footer>
          <a-pagination v-model:current="packageTypeQuery.pageNum" :total="total"
                        v-model:page-size="packageTypeQuery.pageSize" @page-size-change="getList"
                        @change="getList"
                        show-total show-jumper show-page-size/>
        </template>
      </a-table>




    </a-space>
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title>
        {{ title }}
      </template>
      <a-form :model="packageType">
        <a-form-item field="name" label="套餐类型名称">
          <a-input
              v-model="packageType.packageTypeName"
              placeholder="请输入套餐类型名称..."
          />
        </a-form-item>
        <a-form-item field="status" label="套餐状态">
          <a-select v-model="packageType.status" placeholder="请选择状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-form-item>

      </a-form>

    </a-modal>
  </div>


</template>

<script setup lang="ts">
//@ts-ignore

import {ref} from "vue";
import type {PackageTypeDto, PackageTypeQuery} from "@/apis/taocan/taocanType";
import type {Reactive} from "vue-demi";
import {
  addPackageType,
  delPackageType,
  getPackageTypeById,
  getPackageTypeList,
  updatePackageType
} from "@/apis/taocan/taocanType";
import {Notification} from "@arco-design/web-vue";


const title = ref('')

/**
 * add
 * up
 * */
const api = ref('')

const scroll = {
  x: 1200,
  y: 650
};


const visible = ref(false);
const selectList = ref([])
const data:Ref<PackageTypeDto[]> = ref([])
const scrollbar = ref(true);
const total = ref(0)


/**
 * 套餐类型查询类
 * */
const packageTypeQuery:Reactive<PackageTypeQuery> = reactive({
  pageNum: 1,
  pageSize: 10,
  packageTypeName:null,
  status: null,
  updateBy: '',
  updateTime: '',
  id: null,
})

/**
 * 套餐类型实体类
 * */
const packageType:Reactive<PackageTypeDto> = reactive({
  id: 0,
  packageTypeName: '',
  status: 0,
  updateBy: 1,
  updateTime: '',
})






/**
* 新增
* */
const handleClick = () => {


  title.value = '新增汉服类型'
  api.value = 'add'
  visible.value = true;
};

/**
 * 修改
 * */
const updataClick = (data:any) => {
  if(data.id == null ){
    getPackageTypeById(parseInt(selectList.value[0])).then(res => {
      packageType.id = res.data.data.id
      packageType.packageTypeName = res.data.data.packageTypeName
      packageType.status = res.data.data.status
    })
  }else{
    packageType.id = data.id
    packageType.packageTypeName = data.packageTypeName
    packageType.status = data.status
  }




  title.value = '修改汉服类型'
  api.value = 'up'

  visible.value = true;
}


/**
 * 新增表单确定按键
 * */
const handleOk = () => {

  if(api.value == 'add'){

    if(packageType.packageTypeName == '' || packageType.status == null || packageType.packageTypeName == null){
      Notification.error({
        title: '错误',
        content: '套餐类型名称不能为空',
      });
      return
    }else{

      addPackageType(packageType).then(res => {
        Notification.success({
          title: '成功',
          content: '添加成功',
        });
        getList()
      })

    }

  }else if(api.value == 'up'){

    if(packageType.packageTypeName == '' || packageType.status == null || packageType.packageTypeName == null){
      Notification.error({
        title: '错误',
        content: '套餐类型名称不能为空',
      });
      return
    }else{

      updatePackageType(packageType).then(res => {
        Notification.success({
          title: '成功',
          content: '修改成功',
        });
        getList()
      })

    }



  }



}
/**
 * 新增表单取消按键
 * */
const handleCancel = () => {

  visible.value = false;

}

/**
 * 获得套餐类型列表
 * */
const getList = () => {
  getPackageTypeList(packageTypeQuery).then(res => {
    console.log(res)
    data.value = res.data["data"].records
    total.value = res.data["data"].total
  })
}

/**
 * 删除汉服按钮
 **/

const delData = (data:any) => {

  if (data.id == null){

    delPackageType(selectList.value).then(res => {
     Notification.success({
       title: '删除成功',
       content: 'Update success!',
       duration: 1000,
     })
      getList()
    })

  }else {

    delPackageType([data.id]).then(res => {
      Notification.success({
        title: '删除成功',
        content: 'Update success!',
        duration: 1000,
      })
      getList()
    })
  }
}

getList()
</script>

<style lang="scss" scoped>
.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>